<template>
	 <page-meta :root-font-size="`${fontSize}px`"></page-meta>
	<view style="padding: 40rpx;font-size:28rpx">
		<view style="margin-bottom: 60rpx;">
			<view class="party-main-title">
				问题来源分析
			</view>
			<view style="padding: 20rpx;line-height: 46rpx;display: flex;flex-wrap: wrap;">
				<view v-for="(item,index) in data" :key="item.name" style="width: 50%;">
					<label class="rank-decorator" :style="{backgroundColor:color[index]}"></label>
					<label>{{item.name}}：</label> {{item.value}}件
				</view>
			</view>
		</view>
		<view style="margin-bottom: 60rpx;">
			<view class="party-main-title">
				问题处理分析
			</view>
			<wentichulifenxi />
		</view>
		<view style="margin-bottom: 60rpx;">
			<view class="party-main-title">
				问题预警提示
			</view>
			<wentiyujingtishi />
		</view>
	</view>
</template>

<script>
	import wentichulifenxi from "./wentichulifenxi.vue"
	import wentiyujingtishi from "./wentiyujingtishi.vue"
	import { mapState } from 'vuex'
	export default {
		computed: {
			...mapState(['fontSize'])
		},
		components: {
			wentichulifenxi,
			wentiyujingtishi
		},
		data() {
			return {
				color: ["#0263FF", "#A384E1", "#E0DB7E", "#5C9E5E", "#41A9E4", "#18D8DB", "#5753F0", "#C1BEF8", "#537AF0"],
				data: [],
			}
		},
		mounted() {
			if (uni.getStorageSync('projId') == 159) {
				this.data = [
					 { value: 0, name: "上门回收" },
					        { value: 1 + 2+2, name: "设备安装" },
					        { value: 61 + 24 +15, name: "故障报修" },
					        { value: 2 + 2+1, name: "装修验收" },
					        { value: 2 + 5+1, name: "绿植养护" },
					        { value: 3 + 10+5, name: "消防安全" },
					        { value: 28 + 11+8, name: "保洁请理" },
					        { value: 0, name: "其他" },
				];
			}
			if (uni.getStorageSync('projId') == 208) {
				this.data = [
			   { value: 6 + 2 + 8, name: "绿植养护" },
               { value: 140 + 81 + 60, name: "故障报修" },
               { value: 5, name: "上门回收" },
               { value: 21 + 15 + 20, name: "消防安全" },
               { value: 21 + 7 + 10, name: "设备安装" },
               { value: 180 + 111 + 103, name: "保洁请理" },
               { value: 2 + 2 + 2, name: "装修验收" },
               { value: 29 + 20, name: "其他" },
      ];
			}
			this.data = this.data.sort((x, y) => y.value - x.value)
		},
		methods: {

		}
	}
</script>

<style scoped>
	.rank-decorator {
		display: inline-block;
		width: 30rpx;
		height: 20rpx;

		border-radius: 10rpx;
		margin-right: 10rpx;
	}

	.party-main-title {
		font-size: 32rpx;
		color: #333333;
		font-family: Source Han Sans CN;
		font-weight: bold;
		display: flex;
		align-items: center;

	}

	.party-main-title::before {
		content: "";
		display: inline-block;
		width: 18rpx;
		height: 30rpx;
		background: #4874FF;
		border-radius: 10rpx;
		margin-right: 16rpx;
	}

	.chengxiaopingjia-sub-title {
		font-size: 30rpx;
		padding: 10rpx 0;
	}
</style>
